<template>
  <div class="main" ref="coll">
    <div class="over">
      <div class="cityTitle border-bottom">
        <p>当前城市</p>
        <div>
          <ul>
            <li>{{$store.state.city}}</li>
          </ul>
        </div>
      </div>
      <div class="cityTitle border-bottom">
        <p>热门城市</p>
        <div>
          <ul>
            <li v-for="hotCitie in hotCities" :key="hotCitie.id" @click="selectCity(hotCitie.name)">{{hotCitie.name}}</li>
          </ul>
        </div>
      </div>
      <div class="cityTitle border-bottom" v-for="(citie,key) in cities" :key="key" :ref='key'>
        <p>{{key}}</p>
        <div class="cityitem" v-for="city in citie" :key="city.id" @click="selectCity(city.name)" >
          <div>{{city.name}}</div>
        </div>
      </div>
    </div>
    <transition>
    <div class="abc" ref='abc' v-show="judge">
      {{abc}}
    </div>
    </transition>
    
  </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
  name: "CityMain",
  props:{
      hotCities:{
          type:Array,
          default:[]
      },
      cities:{
          type:Object,
          default:{}
      },
      alphabet:{
          type:String,
          default:''
      }
  },
  data() {
      return {
          abc:'',
          judge:false
      }
  },
  methods: {
      selectCity (cityName) {
         console.log(cityName)
         this.$store.commit('changeCity', cityName)
         this.$router.push('/')
      }
  },
  mounted() {
       this.scroll = new BScroll(this.$refs.coll)
  },
  watch: {
      alphabet(){
        const element = this.$refs[this.alphabet][0]
        // console.log(element)
        this.scroll.scrollToElement(element)
        this.abc = this.alphabet
        // console.log(this.$refs.abc)
        this.judge = true
        setTimeout(()=>{
            this.judge = false
        },1000)
      }
  },
};
</script>
<style lang='stylus' scoped>
.main
  width 100%
  position absolute
  top 80px
  bottom 0
  overflow: hidden
 .over
  .cityTitle
    p
      height: 25px
      background-color: #ccc
      line-height: 25px
      padding-left: 15px
    ul
      overflow: hidden
      padding-bottom: 10px
    li
      float: left
      width: 25%
      height: 25px
      line-height: 25px
      text-align: center
      border: 1px solid #ccc
      margin: 10px 0 0 10px
      border-radius: 4px
    .cityitem
      div
        height: 40px
        line-height: 40px
        padding-left: 10px
        border-bottom: 1px solid #ccc
.abc
  position absolute
  background-color rgba(192,192,192,0.5)
  line-height 50px
  text-align center
  font-size 20px
  height 50px
  width 100px
  top 294px
  right 160px
  border-radius 10px
  
.v-enter-to,.v-leave
    opacity 1
.v-enter,.v-leave-to
    opacity 0
.v-enter-active, .v-leave-active
    transition all .3s 
</style>